<template>
    <div class="lookOtherbox">
        <!---出售中-->
        <div class="quchushou-btn" v-if="dtData.sellModel==0 && dtData.sellStatus==10"> 
            <!-- <my-button text='Purchase' :styleType="2" @click="slhbFlag=true"/> -->
            <div class='btn-purchase' :styleType="2" @click="slhbFlag=true" v-t="'sell.text2'">Purchase</div>
            <select-currency v-if="slhbFlag" @close="slhbFlag = false" @confirm="buySubmit"/>
            <!-- <pay-pass v-if="buyPassFlag" @close="buyPassFlag = false" @confirm="buySubmit"/> -->
        </div>
        <!---/出售中-->

        <!---拍卖中-->
        <div class="pmz-btn-box" v-if="dtData.sellModel==1 && dtData.sellStatus==10">
            <!-- <div class="ljcj"><my-button text='Bid Now' :styleType="2" @click="auctionBidFlag=true"/> </div> -->
             <a @click="bidRecordFlag=true" v-t="'sell.text3'">View Bid History</a>
            <div class='btn-purchase' style="margin-left:10px" :styleType="2" @click="auctionBidFlag=true"  v-t="'sell.text4'">Bid Now</div>
            <auction-bid v-if="auctionBidFlag" @close="closeDg"/>
            <bid-record v-if="bidRecordFlag" @close="bidRecordFlag=flase" :id='dtData.sellRecordId'/>
        </div>

        <div v-if="dtData.sellModel==0 && dtData.sellStatus==20">
               {{text5}}
             <div class="dealPrice-view" v-if="dtData.transactionEthPrice">
                    <label v-t="'sell.text6'">Transaction price</label>
                    <span> <img src="/images/priceIcon.png" alt=""> </span>
                    {{dtData.transactionEthPrice.decimalFourString}}
                    <em class="usd">(${{dtData.transactionUsdPrice.decimalTwoString}})</em>
            </div>
        </div>
        <!---/拍卖中-->

        <!---预告中-->
        
        <!---/预告中-->
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,computed,onMounted,inject} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import myButton from '@/components/myButton.vue'
import bidRecord from '@/components/bidRecord.vue'
import cutBorderBox from '@/components/cutBorderBox.vue' 
import myDailog from '@/components/myDailog.vue' 
import auctionBid from './auctionBid.vue'
import countDown from '@/components/countDown.vue'
import payPass from '@/components/payPass.vue'
import selectCurrency from '@/components/selectCurrency.vue'
import { toast,H5CallAPPFuction } from '@/utils/common'
import { useI18n } from 'vue-i18n'

export default {
    components:{
       myButton,
       bidRecord,
       cutBorderBox,
       myDailog,
       auctionBid,
       countDown,
       payPass,
       selectCurrency
    },
    props:{

    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()
        const dtPopClose = inject('dtPopClose')
        const {t} = useI18n()

        const state = reactive({
            dtData:computed(()=>store.state.sell.nftdDetail),
            userInfo:computed(()=>store.state.base.userInfo),
            bidRecordFlag:false,
            auctionBidFlag:false,
            buyPassFlag:false,
            slhbFlag:false,
            text5:t('sell.text5')
        })
        onMounted(()=>{
            // 定义tradeResults方法，供app调用(app交易处理完成后调用)
            window['tradeResults'] = function (result) { // result：{"success":0,"msg":""}
                if(!result){
                    return toast('No Processing Result') // 没有处理结果
                }
                const rt = JSON.parse(result)
                if(rt.success==0){ // 拍卖出价处理出错了
                    toast('Failed')
                }else{
                     toast('Purchase Succeeded！')
                     state.slhbFlag = false
                    setTimeout(() => {
                        context.emit('refresh')
                         dtPopClose()
                    }, 1500);
                   
                } 
            }
        })

        const buySubmit = (currency)=>{
           // alert(pass)  接口：/api/trade/preBuy
           const appParams = {
                buyerAddress:state.userInfo.walletAddress,
                //chainName:state.dtData.chainName,
                currency,
                //sellRecordId:state.dtData.sellRecordId, 
                //password:pass,
                //contractAddress:state.dtData.contractAddress,
                //creatorAddress:state.dtData.ownerAddress,
                //tokenId:state.dtData.tokenId
                ...state.dtData
            }
            console.log("appParams:",appParams)
            try {
                 state.slhbFlag = false
                // 拍卖出价处理: 调用app的directSaleBuy方法，传入参数交由app处理，H5只接受处理结果（tradeResults方法接收）
                H5CallAPPFuction('directSaleBuy',JSON.stringify(appParams)) 
            } catch (error) {
                toast('调用app失败')
                //setTimeout(()=>{tradeResults('{"success":0,"msg":""}')},3000)
            }
            
        }

        const closeDg = ()=>{
            state.auctionBidFlag=false
            context.emit('refresh')
        }

        return{
            ...toRefs(state),
            buySubmit,
            dtPopClose,
            closeDg
        }
    }
}
</script>

<style lang="scss" scoped>
    .lookOtherbox{
        padding: 0;
        font-family: Poppins-Medium, Poppins;
        font-weight: 500;
        font-size: 28px;
        color: #fff;
        line-height: normal;
        .quchushou-btn{
            width: 250px;
        }
        .btn-purchase{
            // position: absolute;
            // bottom:-20px;
            // left:40px;
            width:160px;
            height:60px;
            text-align: center;
            font-size:24px;
            line-height:60px;
            margin-top:10px;
            background-image: url(/images/btn-empt.png);
            background-position: center;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            text-shadow: 0px 2px 4px #C95400;
            color:#eee;
          }
        .paimaizhong-price{
            display: flex;
            height: 200px;
            .pmzitem{
                display: flex;
                flex-flow: column;
                justify-content: center;
                flex: 1;
                background: rgba(103,248,255,0.1);
                padding: 20px 30px;
                &+.pmzitem{
                    margin-left: 20px;
                }
                p{
                    font-size: 30px;
                    color: #82A8D4;
                }
                .pmPrice{
                    font-size: 38px;
                    padding: 5px 0 0 0;
                    span{
                        font-size: 24px;
                        padding: 0 0 0 10px;
                    }
                }
                .jgmy{
                    font-size: 28px;
                    color: #67F8FF;
                    padding: 10px 0 0 0;
                }
            }
        }
        .pmz-btn-box{
            display: flex;
            align-items: center;
            margin: 10px 0 0 0;
            .ljcj{
                width: 250px;
            }
            a{
                display: block;
                color: #67F8FF;
                font-size: 30px;
                margin: 0 0 0 30px;
            }
        }
    }
    .dealPrice-view{
            display: flex;
            height: 60px;
            align-items: left;
            //justify-content: center;
            font-family: Inter-Medium, Inter;
            font-weight: 500;
            color: #CFFFFF;
            font-size:28px;
            line-height: normal;
            margin: 0 0 10px 0;
            &.dealPrice2{
                margin-top: 10px;
                label{
                    padding-left: 0;
                }
            }
            label{
                color: #fff;
                padding: 0 20px 0 50px;
            }
            span{
                padding: 0 10px 0 0;
                img{
                    display: block;
                    width: 22px;
                }
            } 
            em{
                font-style: normal;
                color: #fff;
            }
        }
</style>